<template>
    <div>
        <Row>
 <Col span="6" offset="9">
   <!-- <div class="content">
        <div class="register-body">
            <
            <H1 class="h2-size">欢迎加入坚磐众测</H1>
        </div>
     </div>-->
         <div style="background:#eee;margin-top:100px;">
        <Card class="register-body">
            <h1 class="h1-size"> 欢迎注册</h1>
            <Form class="form-style" ref="formValidate" :model="formValidate" :rules="ruleValidate">
              <FormItem  prop="name">
                <Input v-model="formValidate.name" prefix="ios-contact" placeholder="用户名" ></Input>
              </FormItem>
                <FormItem  prop="email">
            <Input v-model="formValidate.email" prefix="ios-contact" placeholder="邮箱" ></Input>
                </FormItem>
                   <FormItem  prop="password" >
            <Input  prefix="ios-contact" v-model="formValidate.password" type="password" placeholder="密码" ></Input>
                </FormItem>

                       <FormItem  prop="two_password">
            <Input  prefix="ios-contact" type="password" v-model="formValidate.two_password" placeholder="重置密码" ></Input>
                </FormItem>
                 <Button type="primary" :loading="loading2" size="large" @click="toLoading2('formValidate')" >
        <span v-if="!loading2">注册</span>
        <span v-else>Loading...</span>
                </Button>
            </Form> 
            </Card>
    </div>
     </Col>
    
        </Row>
    </div>
</template>
<script>
import  qs from 'qs'
export default {
      data () {
         const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Please enter your password'));
                } else if(value != this.formValidate.password) {
                 
                    callback(new Error('两次密码不一致'));
                } else{
                    callback();
                }
            };
            return {
                loading: false,
                loading2: false,
                formValidate: {
                      email:'',
                      password:'',
                      two_password:''  ,
                      name:'',
                 },
                  ruleValidate: {
                      email:[
                          {required:true,message:'请填写邮箱'},
                          {type:'email',message:'请输入正确的邮箱号'}
                      ],
                    name:[
                      {required:true,message:'请输入用户名'}
                    ],
                      password:[
                          {required:true,message:'请填写密码'}
                      ],
                      two_password:[
                          {required:true,message:'请再次填写密码'},
                          {validator:validatePass,trigger:'blur'}
                      ]
                  }
            }
        },
        methods: {
            toLoading () {
               
              //  this.loading = true;
            },
            toLoading2 (name) {
                   this.loading2 = false;

                 this.$refs[name].validate((valid) => {
                    if (valid) {
                      const login= this.$axios.$post('/api/register',qs.stringify(this.formValidate));
                      login.then(res=>{
                        console.log(res);
                        if (res.code==200){
                          this.$Message.success('注册成功!');
                          this.$router.push('/auth/login');
                        }else{
                          res.errors.forEach(function(item,key){
                            console.log(item)
                          })
                          this.$Message.error(res.errors);
                        }
                        this.loading2=false;

                      }).catch(error=>{

                      })

                    } else {
                        this.$Message.error('注册失败');
                        this.loading2=false;
                    
                    }
                })
             
            }
        }
}
</script>

<style scope="this api replaced by slot-scope in 2.5.0+">
    .content{
        height: 900px;

    }

    .register-body{
        margin-top: 100px;
        background: #fff;
        height: 500px;
        
        text-align: center;
        padding-top: 30px;
        padding-right: 30px;
         padding-left: 30px;
    }
    .form-style{
        margin-top: 70px;
    }
</style>
